<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影详情</title>
		<link rel="icon" href="../static/img/01.png" type="image/x-icon" />
		<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />
		<style>
			@media (min-width: 800px) {
				#img{
					margin-left: 220px;
				}
				#text{
					margin-left: 430px;
					margin-right: 30px;
					margin-top: 66px;
				}
				#mean{
					margin: 150px;
				}
			}
			@media (max-width: 800px) {
				#img{
					margin-left: 100px;
				}
				#text{
					margin-left: 320px;
					margin-top: 66px;
				}
				#mean{
					margin: 100px;
				}
			}
			@media (max-width: 620px) {
				#img{
					margin-left: 20px;
				}
				#text{
					margin-left: 210px;
					margin-top: 66px;
				}
				#mean{
					margin: 40px;
				}
			}
		</style>
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="header"></div>
		
		<!-- 电影详情内容 -->
		<div id="details"></div>
		
		<!-- 页脚 -->
		<div class="position-relative" id="footer"></div>
	</body>
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/bootstrap.bundle.min.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/jquery.tmpl.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/TSMSys.hotelsAjax.js"></script>

	<!-- 详情页模板 -->
	<script data-role="listview" id="myTemplate" type="text/x-jquery-tmpl">
		<div class="m-auto" style="background: linear-gradient(45deg,#020031 0,#6d3353 100%);height: 320px;">
			<div class="float-left position-relative pt-5" id="img">
				<img src="${m_src}" class="img-thumbnail shadow-lg bg-white rounded" style="height: 300px;width:220px">
			</div>
			<div class="position-relative text-white" id="text">
				<div class="float-left position-absolute" style="padding: 50px;">
					<h4 class="font-weight-bold mb-4">${m_name}</h4>
					<!-- 列表组 -->
					<ul class="list-group list-group-flush">
					  <li class="list-group-item bg-transparent p-0">${m_type}</li>
					  <li class="list-group-item bg-transparent p-0">${m_area}</li>
					  <li class="list-group-item bg-transparent p-0">${m_time} 上映</li>
					</ul>
				</div>
				<div class="position-relative" style="padding-top: 200px;padding-left: 40px;">
					<a class="btn m-2 text-white" id="like" style="background-color: #756189; width: 104px;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill like mb-1" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/></svg> 收藏</a>
					<a class="btn text-white" id="score" style="background-color: #756189; width: 104px;"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-star-fill mb-1 score" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg> 点赞</a><br>
					<a class="btn text-white bg-danger ml-2 mt-1" id="shop" style="width: 220px;">特惠购票</a>
				</div>
			</div>
		</div>
		
		<div class="mt-4" id="mean">
			<div class="mb-4" style="margin-top: 80px;">
				<a href="home" class="text-decoration-none text-dark">喵眼电影</a> >
				<a href="movie" class="text-decoration-none text-dark">电影</a> >
				<span>${m_name}</span>
			</div>
			<div>
				<h5 class="mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill text-danger" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>剧情简介</h5>
				<div class="m-4">${m_intro}</div>
				<h5 class="mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill text-danger" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>演职人员</h5>
				<div class="m-4">${m_actors}</div>
			</div>
		</div>
	</script>
	<script>
		$('#header').load('header');
		$('#footer').load('footer');
		var str = window.location.href;
		let list = str.split('=');
		u = decodeURI(list[1].replace("?id",""));
		n = decodeURI(list[2]);
		console.log(u,n);
		$.ajax({
			type:'get',
			url: "http://localhost:8080/maoyan/movies?office="+u+"&id="+n,
			dataType: "json",
			data: {},
			success:function(data){
				console.log(data);
				// 将json对象载入模板,并插入到#details末尾中去
				$('#myTemplate').tmpl(data).appendTo('#details');
				$.getScript("../static/js/details.js");
			},
			error:function(){
				alert('failed!');
			},
		});
	</script>
</html>
